<template>
    <view>
        <view class="logo">
			<image class="img bg1" src="/static/images/login_bg.jpg" mode="width"></image>
			<image class="img bg2" src="/static/images/login_logo_img.png" mode="width"></image>
		</view>
		
		<view class="operation-list">
			<view class="btn login-btn" @click="loginAccount">登錄</view>
			<view class="btn register-btn" @click="registerAccount">註冊</view>
		</view> 
    </view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState(['isLogin'])
		},
		onLoad() {
			if (this.isLogin) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		methods: {
			loginAccount() {
				// console.log('1111111111') 
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}, 
			registerAccount() {
				uni.navigateTo({
					url: '/pages/login/register'
				});
			}
		}
	}
</script>

<style lang="scss">
	
	.logo {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
		
		.bg1 {
			width: 100%;
			height: 80%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;
		}
		
		.bg2 {
			width: 400rpx;
			height: 468.75rpx;
			position: absolute;
			z-index: 6;
			bottom: 40%;
			left: 50%;
			transform: translateX(-50%);
		}
		
	}
	
	.operation-list {
		position: fixed;
		z-index: 10;
		right: 46rpx;
		bottom: 20%;
		left: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.btn {
			width: 315rpx;
			height: 99rpx;
			border-radius: 50rpx;
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.register-btn{
			background-color: #2D3036;
		}
		
		.login-btn {
			background-color: #EB3434;
		}
	}
</style>